<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="lz">
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="yejiao.css">
    <link rel="stylesheet" href="fenlei.css">
    <style>
        .icon1{
            background-position: 0 -700%;
        }
        .icon2{
            background-position: 0 0;
        }
        body{
            background-color: #eee;
            margin-bottom: 65px;
        }
    </style>
</head>

<body>
    <!--导航条-->
    <header id="nav">
        <div>
            <img src="分类/images/icon_back_n.png" alt="">
            <span>商品分类</span>
            <img src="搜索/images/search.png" alt="">
        </div>
    </header>

    <div class="flt">
        <span>手机·电话卡</span>
        <span>笔记本·平板</span>
        <span>电视·盒子</span>
        <span>玩偶</span>
    </div>


    <div class="hf">
        <img src="首页/images/banner02.jpg" alt="">
    </div>

    <!--手机电话卡-->
    <section class="sjdhk">
        <div class="flm">手机·电话卡</div>
        <section class="sjnr">
            <div>
                <img src="分类/images/product1.png" alt="">
                <div>小米Max</div>
            </div>
            <div>
                <img src="分类/images/product2.png" alt="">
                <div>小米5</div>
            </div>
            <div>
                <img src="分类/images/product3.png" alt="">
                <div>红米note3</div>
            </div>
            <div>
                <img src="分类/images/product4.png" alt="">
                <div>小米note3</div>
            </div>
            <div>
                <img src="分类/images/product5.png" alt="">
                <div>小米note3</div>
            </div>
            <div>
                <img src="分类/images/product6.png" alt="">
                <div>小米4</div>
            </div>
            <div>
                <img src="分类/images/product7.png" alt="">
                <div>小米note4</div>
            </div>
            <div>
                <img src="分类/images/product8.png" alt="">
                <div>小米note3</div>
            </div>
            <div>
                <img src="分类/images/product9.png" alt="">
                <div>小米2a</div>
            </div>
            <div>
                <img src="分类/images/product10.png" alt="">
                <div>小米任我行</div>
            </div>
        </section>
    </section>
    <!--小米笔记本-->
    <div class="hf">
        <div class="wz">小米笔记本</div>
        <img src="首页/images/phone2.jpg" alt="">
    </div>

    <section class="sjdhk">
        <div class="flm">手机·电话卡</div>
        <section class="sjnr">
            <div>
                <img src="分类/images/product2-1.png" alt="">
                <div>笔记本12.5</div>
            </div>
            <div>
                <img src="分类/images/product2-2.png" alt="">
                <div>笔记本13.5</div>
            </div>
            <div>
                <img src="分类/images/product2-3.png" alt="">
                <div>笔记本14.5</div>
            </div>
            <div>
                <img src="分类/images/product2-1.png" alt="">
                <div>笔记本15.6</div>
            </div>
        </section>
    </section>

    <!--电视盒子-->
    <div class="hf">
        <img src="首页/images/banner01.jpg" alt="">
    </div>
    <section class="sjdhk">
        <div class="flm">电视盒子</div>
        <section class="sjnr">
            <div>
                <img src="分类/images/product3-1.png" alt="">
                <div>小米电视43"</div>
            </div>
            <div>
                <img src="分类/images/product3-2.png" alt="">
                <div>小米电视48"</div>
            </div>
            <div>
                <img src="分类/images/product3-3.png" alt="">
                <div>小米电视55"</div>
            </div>
            <div>
                <img src="分类/images/product3-4.png" alt="">
                <div>小米电视60"</div>
            </div>
            <div>
                <img src="分类/images/product3-5.png" alt="">
                <div>小米电视65"</div>
            </div>
            <div>
                <img src="分类/images/product3-6.png" alt="">
                <div>小米电视66"</div>
            </div>
            <div>
                <img src="分类/images/product3-7.png" alt="">
                <div>家庭影院</div>
            </div>
            <div>
                <img src="分类/images/product3-8.png" alt="">
                <div>主机音响</div>
            </div>
            <div>
                <img src="分类/images/product3-9.png" alt="">
                <div>盒子</div>
            </div>
            <div>
                <img src="分类/images/product3-10.png" alt="">
                <div>盒子2</div>
            </div>
            <div>
                <img src="分类/images/product3-11.png" alt="">
                <div>游戏手柄</div>
            </div>
            <div>
                <img src="分类/images/product3-12.png" alt="">
                <div>遥控器</div>
            </div>
        </section>
    </section>

    <!--智慧生活-->
    <div class="hf">
        <img src="首页/images/banner03.jpg" alt="">
    </div>
    <section class="sjdhk">
        <div class="flm">智能硬件·路由器</div>
        <section class="sjnr">
            <div>
                <img src="分类/images/product4-1.png" alt="">
                <div>净化机</div>
            </div>
            <div>
                <img src="分类/images/product4-2.png" alt="">
                <div>小米热水器</div>
            </div>
            <div>
                <img src="分类/images/product4-3.png" alt="">
                <div>9号平衡车</div>
            </div>
            <div>
                <img src="分类/images/product4-4.png" alt="">
                <div>小米花洒</div>
            </div>
            <div>
                <img src="分类/images/product4-5.png" alt="">
                <div>小米路由</div>
            </div>
            <div>
                <img src="分类/images/product4-6.jpg" alt="">
                <div>小米手环2</div>
            </div>
            <div>
                <img src="分类/images/product4-7.png" alt="">
                <div>小米电饭煲</div>
            </div>
            <div>
                <img src="分类/images/product4-8.png" alt="">
                <div>小米电水壶</div>
            </div>
            <div>
                <img src="分类/images/product4-9.png" alt="">
                <div>体重秤</div>
            </div>
            <div>
                <img src="分类/images/product4-10.png" alt="">
                <div>血压仪</div>
            </div>
            <div>
                <img src="分类/images/product4-11.jpg" alt="">
                <div>摄像头</div>
            </div>
            <div>
                <img src="分类/images/product4-13.png" alt="">
                <div>小米台灯</div>
            </div>
            <div>
                <img src="分类/images/product4-13.png" alt="">
                <div>小米台灯</div>
            </div>
            <div>
                <img src="分类/images/product4-14.png" alt="">
                <div>小米单车</div>
            </div>
            <div>
                <img src="分类/images/product4-15.png" alt="">
                <div>小米盒子</div>
            </div>
            <div>
                <img src="分类/images/product4-16.png" alt="">
                <div>小米插座</div>
            </div>
            <div>
                <img src="分类/images/product4-17.png" alt="">
                <div>小米收音机</div>
            </div>
            <div>
                <img src="分类/images/product4-18.png" alt="">
                <div>小米儿童手表</div>
            </div>
            <div>
                <img src="分类/images/product4-19.png" alt="">
                <div>小米闹钟</div>
            </div>
            <div>
                <img src="分类/images/product4-20.png" alt="">
                <div>小米无人机</div>
            </div>
            <div>
                <img src="分类/images/product4-21.png" alt="">
                <div>VR眼镜</div>
            </div>
            <div>
                <img src="分类/images/product4-22.png" alt="">
                <div>小米体温计</div>
            </div>
            <div>
                <img src="分类/images/product4-8.png" alt="">
                <div>小米热得快</div>
            </div>
            <div>
                <img src="分类/images/product4-2.png" alt="">
                <div>小米充电宝</div>
            </div>
            <div>
                <img src="分类/images/product4-7.png" alt="">
                <div>小米电饭煲</div>
            </div>
            <div>
                <img src="分类/images/product4-14.png" alt="">
                <div>小米单车</div>
            </div>
        </section>
    </section>

    <!--移动电源-->
    <div class="hf">
        <img src="首页/images/banner02.jpg" alt="">
    </div>
    <section class="sjdhk">
        <div class="flm">移动电源·插线板·电池</div>
        <section class="sjnr">
            <div>
                <img src="分类/images/product5-1.png" alt="">
                <div>小米移动电源</div>
            </div>
            <div>
                <img src="分类/images/product5-2.png" alt="">
                <div>小米插线板</div>
            </div>
            <div>
                <img src="分类/images/product5-3.png" alt="">
                <div>小米电池</div>
            </div>
            <div>
                <img src="分类/images/product5-4.png" alt="">
                <div>小米四口充电器</div>
            </div>
            <div>
                <img src="分类/images/product5-5.png" alt="">
                <div>充电线</div>
            </div>
            <div>
                <img src="分类/images/product5-6.png" alt="">
                <div>小米空调</div>
            </div>
        </section>
    </section>

    <!--音乐发烧-->
    <div class="hf">
        <img src="首页/images/banner03.jpg" alt="">
    </div>
    <section class="sjdhk">
        <div class="flm">耳机·音箱·储存卡</div>
        <section class="sjnr">
            <div>
                <img src="分类/images/product6-1.png" alt="">
                <div>小米胶囊耳机</div>
            </div>
            <div>
                <img src="分类/images/product6-2.png" alt="">
                <div>小米蓝牙</div>
            </div>
            <div>
                <img src="分类/images/product6-3.png" alt="">
                <div>小米耳机 金</div>
            </div>
            <div>
                <img src="分类/images/product6-4.png" alt="">
                <div>小米耳机 粉</div>
            </div>
            <div>
                <img src="分类/images/product6-5.png" alt="">
                <div>小米扣头</div>
            </div>
            <div>
                <img src="分类/images/product6-6.png" alt="">
                <div>小米扣头2</div>
            </div>
            <div>
                <img src="分类/images/product6-7.png" alt="">
                <div>小米小钢炮</div>
            </div>
            <div>
                <img src="分类/images/product6-8.png" alt="">
                <div>小米储存卡</div>
            </div>
        </section>
    </section>

    <!--小米生活方式-->
    <div class="hf">
        <img src="首页/images/banner02.jpg" alt="">
    </div>
    <section class="sjdhk">
        <div class="flm">小米生活方式</div>
        <section class="sjnr">
            <div>
                <img src="分类/images/product7-1.png" alt="">
                <div>小米快报</div>
            </div>
            <div>
                <img src="分类/images/product7-2.jpg" alt="">
                <div>小米衬衫</div>
            </div>
            <div>
                <img src="分类/images/product7-3.png" alt="">
                <div>小米卡通靠枕</div>
            </div>
            <div>
                <img src="分类/images/product7-4.png" alt="">
                <div>小米背包</div>
            </div>
            <div>
                <img src="分类/images/product7-5.png" alt="">
                <div>小米旅行箱</div>
            </div>
            <div>
                <img src="分类/images/product7-6.png" alt="">
                <div>小米自拍杆</div>
            </div>
            <div>
                <img src="分类/images/product7-7.png" alt="">
                <div>小米收纳盒</div>
            </div>
            <div>
                <img src="分类/images/product7-8.png" alt="">
                <div>小米读卡器</div>
            </div>
            <div>
                <img src="分类/images/product7-9.png" alt="">
                <div>小米小风扇</div>
            </div>
            <div>
                <img src="分类/images/product7-10.png" alt="">
                <div>小米颈枕</div>
            </div>
            <div>
                <img src="分类/images/product7-11.png" alt="">
                <div>小米陀螺</div>
            </div>
            <div>
                <img src="分类/images/product7-12.png" alt="">
                <div>小米防尘塞</div>
            </div>
            <div>
                <img src="分类/images/product7-13.png" alt="">
                <div>小米防尘塞 镜</div>
            </div>
            <div>
                <img src="分类/images/product7-14.png" alt="">
                <div>小米变形金刚</div>
            </div>
        </section>
    </section>

    <!--手机好伴侣-->
    <div class="hf">
        <img src="首页/images/banner03.jpg" alt="">
    </div>
    <section class="sjdhk">
        <div class="flm">保护类配件</div>
        <section class="sjnr">
            <div>
                <img src="分类/images/product8-1.png" alt="">
                <div>手机套</div>
            </div>
            <div>
                <img src="分类/images/product8-2.png" alt="">
                <div>手机屏幕膜</div>
            </div>
        </section>
    </section>


    <div class="hf">
        <img src="首页/images/banner01.jpg" alt="">
    </div>
    <section class="sjdhk">
        <div class="flm">优惠套装</div>
        <section class="sjnr">
            <div>
                <img src="分类/images/product9-1.png" alt="">
                <div>充电宝套装</div>
            </div>
            <div>
                <img src="分类/images/product9-2.png" alt="">
                <div>手环套装</div>
            </div>
            <div>
                <img src="分类/images/product9-3.jpg" alt="">
                <div>手机套装</div>
            </div>
        </section>
    </section>
    <!--页脚-->
    <footer>
        <nav>

            <a href="首页.html"    >
                <div class="tpjl icon1"></div>
                <div>首页</div>
            </a>
            <a href="#" >
                <div class="tpjl icon2"></div>
                <div>分类</div>
            </a>
            <a href="购物车.html" >
                <div class="tpjl icon3"></div>
                <div>购物车</div>
            </a>
            <a href="我的.html" >
                <div class="tpjl icon4"></div>
                <div>我的</div>

                </div>
        </nav>
    </footer>
    <script src="bootstrap/js/jquery-3.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

</html>